<template>
    <van-nav-bar title="寻宠" left-arrow @click-left="goBack" />
    <div class="seeking-container">
        
        
        <van-cell class="seeking-card" v-for="item in seekList" :key="item.seekTableId">
            <div class="seeking-card-header">
                <div class="header-img" @click="toSeekDetail(item.seekTableId)">
                    <van-image round width="3rem" height="3rem" fit="cover" 
                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
                </div>
                <div class="header-content">
                    <div>{{ item.seekAutorName}}</div>
                    <div><span>{{ dayjs(item.seekCreateTime).format('YYYY-MM-DD HH:mm')}} </span><span> {{ item.position }}</span></div>
                </div>
            </div>

            <div class="seeking-text">
                {{ item.seekContent }}
            </div>
            <div class="seeking-img">
                <img 
                    v-for="(imgUrl, index) in item.seekImgUrl" 
                    :key="index" 
                    :src="imgUrl" 
                    >
            </div>
            <div class="seeking-address">
                <van-icon name="location" />
                <span>丢失地址：{{item.position}}</span>
            </div>
            <div class="seeking-commet">
                <div><van-field style="width: 200px; height:40px" class="seeking-input" height="20px" placeholder="说点什么..." left-icon="smile-comment-o" background="red" /></div>
                <div @click="toSeekDetail(item.seekTableId)"><van-icon name="comment-o" size="20"/><span> 0</span></div>
            </div>
        
            <!-- <img src="../img/10.jpg" alt=""> -->
        </van-cell>
        
        

    </div>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import { getSeekInfo,getSeekName } from '../api'
import { useRouter } from 'vue-router'

const router = useRouter()
import dayjs from 'dayjs'

const seekList = ref([])
const getSeekList = async ()=>{
    let ret = await getSeekInfo();
    // let ret2 = await getSeekName(1);
    ret.forEach(item => {
        
        let obj = {};
        // obj.seekName = ret2;
        obj.seekAutorId = item.seekAutorId
        obj.seekTableId = item.seekTableId
        obj.seekContent = item.seekContent
        obj.seekCreateTime = item.seekCreateTime
        obj.position = item.position
        obj.seekAutorName = item.seekAutorName
        if(item.seekImgUrl == '' || item.seekImgUrl == null){
            obj.seekImgUrl = null
        }else{
            obj.seekImgUrl = item.seekImgUrl.split(',')
        }
        seekList.value.push(obj)
    });
}
onMounted(() => {
  getSeekList()
});
const toSeekDetail = (seekTableId)=>{
    router.push({
        name:'seekDetail',
        query:{seekTableId:seekTableId}
    })
}
const goBack = ()=>{
    router.back()
}

</script>

<style lang='less' scoped>
    .seeking-container{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .seeking-card {
        
        width: 90vw;
        // height: 10vh;
        margin: 2vw 5vw;
        padding: 3vw;
        border-radius: 10px;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);

        .seeking-card-header{
            display: flex;
            justify-content: flex-start;
            height: 3rem;

            .header-content{
                display: flex;
                flex-direction: column;
                margin-left: 1.5rem;

                div:first-child{
                    text-align: left;
                    font-size: 1rem;
                    color: black;
                }
            }
        }
        .seeking-text{
            text-align: left;
            padding: 10px 0;
            color: black;
            font-size: 1rem;
        }
        .seeking-img{
            display: flex;
            flex-wrap: wrap;

            img{
                display: block;
                width: 31%;
                height: 31%;
                border-radius: 8px;
                margin-bottom: 3%;
            }
            img:nth-child(3n+1){
                margin-right: 3%;
            }
            img:nth-child(3n-1){
                margin-right: 3%;
            }
        }
        .seeking-address{
            margin-top: 10px;
            text-align: left;
        }
        .seeking-commet{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-right: 5px;

            .seeking-input{
                display: flex;
                align-items: baseline;
                background-color: #F7F8FA;
                border-radius: 10px;
            }
        }
    }
</style>